<!DOCTYPE html>
<html lang="en">


<head>

    <meta charset="UTF-8" />
    <title>404</title>
    <style>
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }

        body {
            background: #19a39d;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            --size: min(25vw, 25vh);
            --b-bg: #d0d2ca;
            --c-bg: #585858;
            gap: calc(var(--size) / 3);
        }

        .four {
            position: relative;
            color: var(--b-bg);
            font-size: calc(var(--size) / 2.5);
            width: 1.75em;
            height: 1.75em;
            border-bottom: 0.4em solid;
            border-left: 0.4em solid;
        }

        .four:after {
            content: '';
            position: absolute;
            background-color: var(--c-bg);
            width: 0.4em;
            height: 2em;
            left: 50%;
            top: 0;
            transform: translate(-50%, 25%);
        }

        .sheep {
            font-size: calc(var(--size) / 2.5);
            height: var(--size);
            width: var(--size);
            border-radius: 50%;
            background: var(--b-bg);
            position: relative;
        }

        .sheep:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, -25%);
            color: var(--b-bg);
            background: currentcolor;
            height: 1em;
            width: 1em;
            border-radius: 50%;
            box-shadow: 0 2em, 1em 1em, -1em 1em, -0.75em 1.75em, 0.75em 1.75em, 0.75em 0.25em, -0.75em 0.25em;
        }

        .sheep:before {
            content: '';
            position: absolute;
            color: var(--c-bg);
            background: currentcolor;
            width: 0.2em;
            height: 0.65em;
            top: 100%;
            left: 25%;
            transform: translate(0, -25%);
            box-shadow: 1em 0;
        }

        .sheep .head {
            position: absolute;
            width: 0.75em;
            height: 1em;
            border-radius: 0.3em;
            background: var(--c-bg);
            z-index: 2;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transform-origin: 50% 5%;
            animation: 5s headMove infinite;
        }

        .sheep .head:after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0.2em;
            transform: translatex(-50%);
            width: 0.2em;
            height: 0.13em;
            background: rgba(0, 0, 0, 0.1);
            border-bottom: 0.06em solid #414241;
            border-radius: 0.05em;
        }

        .sheep .head:before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0.12em;
            transform: translatex(-50%);
            width: 0.05em;
            height: 0.1em;
            background: #414241;
            border-radius: 0.02em;
        }

        .sheep .head .ear {
            position: absolute;
            height: 0.6em;
            width: 0.5em;
            border-radius: 0 100%;
            background: #494949;
            top: -15%;
            left: 90%;
            transform: rotate(-10deg);
            animation: 5s rightEarMove infinite;
        }

        .sheep .head .ear+.ear {
            transform: rotate(90deg);
            animation: 5s leftEarMove infinite;
            left: auto;
            right: 90%;
        }

        .sheep .head .eye {
            position: absolute;
            left: -0.15em;
            top: -0.15em;
            height: 0.55em;
            width: 0.55em;
            border-radius: 50%;
            border: 0.1em solid var(--c-bg);
            background: var(--c-bg) linear-gradient(var(--c-bg) 40%, #fff 0) no-repeat;
            background-size: 100% 0.88em;
            background-position: 0px -0.2em;
            overflow: hidden;
            animation: 5s eyeShade infinite;
        }

        .sheep .head .eye:before {
            content: '';
            position: absolute;
            height: 0.1em;
            width: 0.1em;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #3e3f3e;
            transform-origin: 50% -0.1em;
            animation: 5s eyeMovement infinite;
        }

        .sheep .head .eye+.eye {
            left: auto;
            right: -0.15em;
        }

        @keyframes headMove {

            0%,
            50%,
            100% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            25% {
                transform: translate(-75%, -50%) rotate(5deg);
            }

            75% {
                transform: translate(-25%, -50%) rotate(-5deg);
            }
        }

        @keyframes rightEarMove {

            0%,
            50%,
            100% {
                transform: translatex(0) rotate(-10deg);
            }

            25% {
                transform: translatex(0) rotate(-15deg);
            }

            75% {
                transform: translatex(-0.1em) rotate(-10deg);
            }
        }

        @keyframes leftEarMove {

            0%,
            50%,
            100% {
                transform: translatex(0) rotate(90deg);
            }

            25% {
                transform: translatex(0.1em) rotate(90deg);
            }

            75% {
                transform: translatex(-0.1em) rotate(90deg);
            }
        }

        @keyframes eyeMovement {

            0%,
            50%,
            100% {
                transform: translate(-50%, 0.05em) rotate(0deg);
            }

            25% {
                transform: translate(-50%, 0.05em) rotate(45deg);
            }

            75% {
                transform: translate(-50%, 0.05em) rotate(-45deg);
            }
        }

        @keyframes eyeShade {

            0%,
            50%,
            100% {
                background-position: 0px -0.14em;
            }

            25%,
            75% {
                background-position: 0px -0.22em;
            }
        }
    </style>

</head>


<body>
    <div class="four"></div>
    <div class="sheep">
        <div class="head">
            <div class="ear"></div>
            <div class="ear"></div>
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
    <div class="four"></div>
</body>

</html>